<template>
  <div class="main-page">
    <div class="main-01">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>园区信息</span>
        </div>
        <div class="main-tab-box">
          <div class="main-tab-box-l">
            <img src="./assets/img/h-005.png" class="main-tab-box-l-img"/>
            <div class="main-tab-box-t">
              <div class="main-tab-box-t-01">
                <span>占地面积</span>
                <span class="color-t01">{{ detail.extent }}</span>
              </div>
              <div class="main-tab-box-t-01">
                <span>教学区域</span>
                <span class="color-t02">{{ detail.tech_extent }}</span>
              </div>
              <div class="main-tab-box-t-01">
                <span>公共区域</span>
                <span class="color-t02">{{ detail.public_extent }}</span>
              </div>
            </div>
          </div>
          <div class="main-tab-box-l">
            <img src="./assets/img/h-006.png" class="main-tab-box-l-img"/>
            <div class="main-tab-box-t">
              <div class="main-tab-box-t-01">
                <span>职工总数</span>
                <span class="color-t03">{{ man + woman }}</span>
              </div>
              <div class="main-tab-box-t-01">
                <span>男</span>
                <span class="color-t02">{{ man }}</span>
              </div>
              <div class="main-tab-box-t-01">
                <span>女</span>
                <span class="color-t02">{{ woman }}</span>
              </div>
            </div>
          </div>
          <div class="main-tab-box-l">
            <img src="./assets/img/h-007.png" class="main-tab-box-l-img"/>
            <div class="main-tab-box-t">
              <div class="main-tab-box-t-01">
                <span>开办时间：{{ detail.day }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>师资队伍</span>
        </div>
        <div id="chart5" style="width:100%;height: 300px;" class="echartMap-line"></div>
      </div>
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>承办课题</span>
        </div>
        <div id="development_Line" style="width:100%;height: 300px;" class="home_top_Development"></div>
      </div>
    </div>
    <div class="main-02">
      <div class="main-02-top">
        <video :src="detail.video" class="header-bo-l-video" controls v-if="detail.video" loop autoplay></video>
        <img :src="detail.pic" class="header-bo-l-video" v-else-if="detail.pic"/>
        <img :src="require('./assets/img/video.png')" class="header-bo-l-video" v-else/>
      </div>
      <div class="main-02-bottom">
        <div class="main-02-bottom-l">
          <div class="main-tab-title">
            <span>年段班级</span>
          </div>
          <div id="development_Line-01" style="width:100%;height: 350px;" class="home_top_Development"></div>
        </div>
        <div class="main-02-bottom-l">
          <div class="main-tab-title">
            <span>幼儿人数</span>
          </div>
          <div id="development_Line-02" style="width:100%;height: 350px;" class="home_top_Development"></div>
        </div>
      </div>
    </div>
    <div class="main-03">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>荣誉展示</span>
        </div>
        <div class="banner-box">
          <div v-for="(item, index) in honorList" :key="index" class="banner-box-img">
            <img :src="item.honor" class="header-bo-l"/>
<!--            <img :src="require(`@/fullscreen/assets/img/hornor_0${item}.jpg`)" class="header-bo-l"/>-->
          </div>
        </div>
      </div>
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>校园文化</span>
        </div>
        <div style="width:100%;" class="home_top_Development" v-html="safeRichTextContent"></div>
      </div>
    </div>
  </div>
</template>

<script>

import {schoolOverviewIndex, schoolHonor} from "@/api/admin/school";
import item from "@/layout/components/Sidebar/Item.vue";
import year from "@/components/Crontab/year.vue";

let echarts = require('echarts')
export default {
  name: "home",
  data() {
    return {
      detail: [],
      man: 0,
      woman: 0,
      safeRichTextContent: '',
      honorList: []
    }
  },
  created() {
    this.getSchoolFn();
    this.schoolHonorFn()
  },
  mounted() {
  },
  methods: {
    schoolHonorFn() {
      schoolHonor().then(res => {
        console.log('res____', res)
        this.honorList = res.list
      })
    },
    level_echarts_three(data) {
      let name = data.map(item => item.name)
      this.$nextTick(function () {
        let Chart5 = echarts.init(document.getElementById('chart5'));
        let option = {
          color: ['#02AEFF', '#ffe384'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['男', '女'],
            textStyle: {
              color: '#b5c5d4',
              fontSize: 16,
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#b5c5d4'],
                type: 'solid'
              }
            },
            data: name,
          },
          yAxis: {
            type: 'value',
            max: 60,
            // y轴分割线
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            // x轴分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#315070',
                type: 'dashed'
              }
            },
          },
          grid:
            {
              left: '2%',
              right: '2%',
              bottom: 0,
              top: '20px',
              containLabel: true
            },
          series: [{
            name: '男',
            // barMaxWidth: '40',
            data: data.map(item => item.man),
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: '#02AEFF',
                    fontSize: 16
                  }
                }
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(88, 88, 88, 0.1)'
            }
          },
            {
              name: '女',
              // barMaxWidth: '40',
              data: data.map(item => item.woman),
              type: 'bar',
              itemStyle: {
                normal: {
                  label: {
                    show: true,  //开启显示
                    position: 'top',  //在上方显示
                    textStyle: {  //数值样式
                      color: '#02AEFF',
                      fontSize: 16
                    }
                  }
                }
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(88, 88, 88, 0.1)'
              }
            }]
        };
        Chart5.setOption(option);
      })
    },
    // 承办主题
    studyGrowthEcharts(data) {
      // 提取 x 轴和 y 轴的数据
      let name = data.map(topic => topic.semester.year);
      let number = data.map(topic => topic.number);
      this.$nextTick(() => {
        let Chart5 = echarts.init(document.getElementById('development_Line'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#b5c5d4'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#b5c5d4'],
                type: 'solid'
              }
            },
            data: name,
          },
          yAxis: {
            type: 'value',
            max: 10,
            axisLine: {
              lineStyle: {
                color: '#b5c5d4'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#315070',
                type: 'dashed'
              }
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: 0,
            top: '20px',
            containLabel: true
          },
          series: [{
            name: '数量',
            barMaxWidth: '40',
            data: number,
            type: 'bar',
            symbolSize: 6,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#b5c5d4',
                    fontSize: 16,
                  }
                }
              }
            },
            lineStyle: {
              width: 3.3,
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255,208,33, .6)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(1,12,33, .1)',
                  },
                ],
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(88, 88, 88, 0.1)'
            }
          }]
        };

        Chart5.setOption(option);
      });
    },
    // 年段班级
    section_growth_echarts(data) {
      this.$nextTick(function () {
        let Chart5 = echarts.init(document.getElementById('development_Line-01'));
        // 提取年份
        const years = [];
        for (let i = 0; i < data[0].list.length; i++) {
          years.push(data[0].list[i].name);
        }

        // 提取数据
        const seriesData = [];
        for (let i = 0; i < data.length; i++) {
          const section = data[i];
          const data_value = [];
          for (let j = 0; j < section.list.length; j++) {
            data_value.push(section.list[j].number);
          }
          seriesData.push({
            name: section.section_name,
            type: 'line',
            data: data_value
          });
        }

        const option = {
          tooltip: {
            trigger: 'axis',
          },
          grid:
            {
              left: '2%',
              right: '2%',
              bottom: 0,
              top: '20px',
              containLabel: true
            },
          legend: {
            data: data.map(section => section.section_name),
            textStyle: {
              color: '#b5c5d4',
              fontSize: 16,
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#315070'],
                type: 'dashed'
              }
            },
            data: years
          },
          yAxis: {
            type: 'value'
          },
          series: seriesData
        };

        Chart5.setOption(option);
      })
    },
    // 幼儿人数
    student_growth_echarts(data) {
      let year = data.map(item => item.year);
      let number = data.map(item => item.number);
      this.$nextTick(function () {
        let Chart5 = echarts.init(document.getElementById('development_Line-02'));
        let option = {
          // color: ['#002993', '#E1AB27', '#FF00FF', '#02AEFF', '#9162E6', '#C7FB13', '#01FF01', '#9b4003'],
          color: ['#02AEFF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#315070'],
                type: 'dashed'
              }
            },
            data: year,
          },
          yAxis: {
            type: 'value',
            // y轴分割线
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            // x轴分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#315070',
                type: 'dashed'
              }
            },
          },
          grid:
            {
              left: '2%',
              right: '2%',
              bottom: 0,
              top: '20px',
              containLabel: true
            },
          series: [{
            name: '人数',
            // barMaxWidth: '40',
            data: number,
            type: 'line',
            itemStyle: {
              normal: {
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: '#b5c5d4',
                    fontSize: 16
                  }
                }
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(88, 88, 88, 0.1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(0,124,2)', // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(1,12,33, .1)', // 渐变结束颜色（透明）
                  },
                ],
              },
            },
            color: "#1f9665", //线条颜色
          }]
        };
        Chart5.setOption(option);
      })
    },
    getSchoolFn() {
      schoolOverviewIndex().then(res => {
        if (res.code == 0) {
          this.man = res.sex.man;
          this.woman = res.sex.woman;
          this.detail = res.detail;
          this.safeRichTextContent = res.detail.culture
          this.level_echarts_three(res.level)
          this.student_growth_echarts(res.student)
          this.section_growth_echarts(res.section)
          this.studyGrowthEcharts(res.topic)
        }
        console.log(res, '学校返回的')
      })
    }
  }
}
</script>

<style scoped>
.main-page {
  display: flex;
  padding: 10px;
}

.main-tab-title {
  background: url(./assets/img/h-008.png) no-repeat;
  background-size: 100% 50px;
  background-position: left bottom;
  height: 50px;
  font-style: italic;
  font-size: 26px;
  padding-left: 40px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.main-tab-title span {
  background: linear-gradient(to bottom, #fff, #fcfcb8);
  -webkit-background-clip: text; /* 将背景裁剪为文字区域 */
  -webkit-text-fill-color: transparent; /* 将文字颜色设置为透明 */
  /*color: #fcfcb8;*/
  /*text-shadow: 2px 2px 1px #000;*/
}

.color-t01 {
  color: #ffd93b;
}

.color-t02 {
  color: #32dcfb;
}

.color-t03 {
  color: #0fda83;
}

.main-01 {
  width: 20%;
  background: rgba(5, 25, 53, .6);
  border-radius: 10px;
  padding: 10px;
}

.main-02 {
  flex: 1;
  background: rgba(5, 25, 53, .6);
  margin: 0 20px;
  border-radius: 10px;
}

.main-03 {
  width: 20%;
  background: rgba(5, 25, 53, .6);
  border-radius: 10px;
  padding: 10px;
}

.main-tab-box {
  padding: 10px 0;
}

.main-tab-box-l {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.main-tab-box-l:last-child {
  margin-bottom: 0;
}

.main-tab-box-l-img {
  margin-right: 20px;
}

.main-tab-box-t {
  display: flex;
  align-items: center;
  flex: 1;
}

.main-tab-box-t-01 {
  flex: 1;
}

.main-tab-box-t-01 span:nth-child(1) {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 5px;
  display: block;
}

.main-tab-box-t-01 span:nth-child(2) {
  font-size: 26px;
}

.home_top_Development {
  height: 100%;
  width: 100%;
  color: #ddd;
  font-size: 20px;
  line-height: 2.8; /* 调整行间距 */
}

.main-tab-01-01 {
  margin-bottom: 30px;
}

.header-bo-l-video {
  width: 100%;
  height: 680px;
}

.main-02-bottom {
  display: flex;
  padding-top: 20px;
}

.main-02-bottom-l {
  flex: 1;
}

.main-02-bottom-l:first-child {
  margin-right: 20px;
}

.banner-box {
  overflow-y: auto;
  height: 600px;
}

.banner-box-img {
  width: 50%;
  float: left;
  margin-bottom: 10px;
}

.banner-box-img:nth-child(2n-1) {
  padding-right: 10px;
}

.banner-box-img:nth-child(2n) {
  padding-left: 10px;
}

.banner-box img {
  width: 100%;
  display: block;
  height: 120px;
}

</style>
